const path = require('path');
const { merge } = require('webpack-merge');
const baseConfig = require('./webpack.base.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 公共配置

const devConfig = {
    mode: 'development', // 开发模式
    entry: { index: path.join(__dirname, "../src/index.js") }, // 入口，处理资源文件的依赖关系
    output: {
        path: path.join(__dirname, "../dist"),
        filename: "js/[name].js",
    },
    module: {
        rules: [
            {
                test: /\.less$/,
                exclude: /\.min.css$/,
                use: [
                    { loader: MiniCssExtractPlugin.loader },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: {
                                mode: "global"
                            }
                        }
                    },
                    { loader: 'style-loader' },
                    { loader: 'less-loader' }
                ]
            },
            {
                test: /\.css$/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' }
                ]
            }
        ]
    },
    devServer: {
        static: path.join(__dirname, '../dist/'),
        compress: true,
        host: 'localhost',
        port: 9527, // 启动端口
        open: true, // 打开浏览器
        hot: true
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, '../src/index.html'),
            filename: 'index.html',
            chunks: ['index'],
            inject: 'body'
        }),
        new MiniCssExtractPlugin({
            filename: "index.min.css" // 提取后的css的文件名
        })
    ]
};

module.exports = merge(devConfig, baseConfig); // 合并配置